<template>
    <view class="class-info-list">
        <view class="author-header" v-if="idName==='author'"/>
        <view class="other-header" v-else>
            <image :src="headImg" mode="aspectFit"/>
        </view>
        <view class="img-wrapper">
            <image :src="headImg" v-if="idName==='author'"/>
            <view class="class-info">
                <view class="title">{{name}}</view>
                <view class="common-little-font">
                    {{introduction || '暂无介绍'}}
                </view>
            </view>
        </view>
       <view style="top: -80rpx; position: relative; height: 1000rpx;">
           <mescroll-uni @down="downCallback"  :down="downOption"  @up="upCallback" :up="upOption" top="0"  class="mescroll-flex" :fixed="false" @init="mescrollInit">
               <view class="class-list common-interval">
                   <shopBookCard
                           v-for="(item, index) in bookList"
                           :key="index"
                           :item="item"
                           @linkTo="linkTo"
                           @updateBooks="updateBooks"
                   />
               </view>
           </mescroll-uni>
       </view>
    </view>
</template>

<script>
    import shopBookCard from '../index/bookDetail/shop-book-card'
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import service from "@/service";
    import { getBooks } from '@/util/commonFn'
    import {mapGetters} from 'vuex';
    export default {
        name: "classInfoList",
        components: {
            shopBookCard, MescrollUni
        },
        computed: {
            ...mapGetters(['className'])
        },
        data(){
            return{
                idName: '',
                id: '',
                name: '',
                introduction: '',
                headImg: '',
                bookList: [],
                page: 1,
                limit: 20,
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true,
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null,
                defaultUrl: 'https://img.thumbrary.com/mzgd.png'
            }
        },
        onLoad(params){
            let {idName, id} = params
            this.idName = idName;
            this.id = id;
            this.getBooks(id);
            this.getClassDetail(idName);
            uni.setNavigationBarTitle({
                title: this.className
            });
        },
        methods: {
            downCallback(mescroll){
                this.recommondData = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.getBooks(this.id);
            },
            getBooks (id, para) {
                uni.showLoading({
                    title: '加载中',
                });
                let params = {
                    [this.idName+'Id']: id,
                    page: this.page,
                    limit: this.limit
                }
                para ? params = {...params, ...para} : null
                getBooks(params).then(result=>{
                    let data = result.data || [];
                    (this.page > 1 && !para) ? this.bookList.push(...data) : this.bookList = data;
                    this.mescroll && this.mescroll.endBySize(data.length, data.num);
                })
            },
            getClassDetail (idName) {
                uni.showLoading({
                    title: '加载中',
                });
                service.homeService.getClassDetail({
                    data: {
                        [this.idName+'Id']:this.id,
                    },
                    type: idName,
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.name = res.result[idName+'Name'];
                            this.introduction = res.result[idName+'Introduction'];
                            this.headImg = res.result[idName+'Head'];
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            updateBooks(){
                this.getBooks(this.id, {
                    page: 1,
                    limit: this.bookList.length
                });
            },
            linkTo(item){
                uni.navigateTo({
                    url: `../components/gw-book-detail?booksId=${item.booksId}`
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .class-info-list{
        .author-header{
            height: 313rpx;
            position: relative;
            background:linear-gradient(97deg,rgba(43,168,252,1) 0%,rgba(110,110,255,1) 100%);
        }
        .other-header{
            width:750rpx;
            height:563rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .img-wrapper{
            position: relative;
            background: #FFFFFF;
            width: 690rpx;
            left: 30rpx;
            box-shadow:0rpx 3rpx 20rpx rgba(0,0,0,0.06);
            border-radius:20rpx;
            padding-top: 100rpx;
            top: -140rpx;
            image{
                width: 160rpx;
                height: 160rpx;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: -80rpx;
                transform: translateX(-50%);
                z-index: 2;
            }
            .class-info{
                padding: 10rpx 30rpx 30rpx;
                .title{
                    font-size: 32rpx;
                    text-align: center;
                    margin-bottom: 20rpx;
                }
            }
        }
        .class-list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            /*padding-bottom: 120rpx;*/
            box-sizing: border-box;
        }
    }
</style>
